home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap12 / dun12_7.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  2.9 KB  |  112 lines
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Dynamic image map</TITLE>
  4. <SCRIPT LANGUAGE="JavaScript">
  5. var L=new layerTool();
  6. function layerTool()
  7.     {
  8.     if (navigator.appName=="Netscape")
  9.         this.layerProp=navProp;
  10.     else
  11.         this.layerProp=exProp;
  12.     }
  13. function exProp()
  14.     {
  15.     return document.all[arguments[arguments.length-1]].style;
  16.     }
  17. function navProp()
  18.     {
  19.     retVal="";
  20.     for (x=0;x<arguments.length;x++)
  21.         {
  22.         retVal+="document.layers[\'"+arguments[x]+"\']";
  23.         if (x!=arguments.length-1)
  24.             retVal+=".";
  25.         }
  26.     return eval(retVal);
  27.     }
  28.  
  29. p=new Array();
  30. p[0]=new Area(25,30,125,75,"http://www.corrosive.co.uk/");
  31. p[1]=new Area(5,125,130,175,"http://www.corrosive.co.uk/");
  32. p[2]=new Area(115,100,225,126,"http://www.corrosive.co.uk/");
  33.  
  34. var cyc=0;
  35. m=new map("m","container","topLayer",p);
  36. function Area(X1,Y1,X2,Y2,url)
  37.     {
  38.     this.left=X1;
  39.     this.top=Y1;
  40.     this.right=X2;
  41.     this.bottom=Y2;
  42.     this.url=url;
  43.     }
  44. function map(name,container,top,areas)
  45.     {
  46.     this.name=name;
  47.     this.top=top;
  48.     this.container=container;
  49.     this.areas=areas;
  50.     this.writeMap=writeMap;
  51.     this. highlight=highlight;
  52.     this.reset=reset;
  53.     this.timeout=null;
  54.     }
  55. function writeMap (mapName)
  56.     {
  57.     document.write("<map name="+mapName+">");
  58.     for (x=0;x<this.areas.length;x++)
  59.         {
  60.         document.write("<area shape=\"RECT\" href='"+this.areas[x].url+"' 
  61. onMouseOver='"+this.name+".highlight("+x+")' ");
  62.         document.write("onMouseOut='"+this.name+".reset()' ");
  63.         document.write("COORDS=\""+this.areas[x].left+","+this.areas[x].top+" 
  64. "+this.areas[x].right+","+this.areas[x].bottom+"\">");
  65.         }
  66.     document.write("</map>");
  67.     }
  68. function highlight(num)
  69.     {
  70.     clearTimeout(this.timeout);
  71.     this.timeout=setTimeout(this.name+".reset()",5000);
  72.     L.layerProp(this.container,this.top).visibility="visible";
  73.     L.layerProp(this.container,this.top).clip.top=this.areas[num].top;
  74.     L.layerProp(this.container,this.top).clip.left=this.areas[num].left;
  75.     L.layerProp(this.container,this.top).clip.bottom=this.areas[num].bottom;
  76.     L.layerProp(this.container,this.top).clip.right=this.areas[num].right;
  77.     }
  78. function reset()
  79.     {
  80.     L.layerProp(this.container,this.top).visibility="hidden";
  81.     }
  82. </SCRIPT>
  83. <STYLE TYPE="text/css">
  84. .maps{
  85.     POSITION:absolute
  86.     }
  87. #container{
  88.     POSITION:relative
  89.     }
  90. #topLayer{
  91.     VISIBILITY:hidden
  92.     }
  93. </STYLE>
  94. <SCRIPT>
  95.     m.writeMap("myMap");
  96. </SCRIPT>
  97.  
  98. </HEAD>
  99. <BODY BGCOLOR="#FFFFFF">
  100.  
  101. <DIV ID="container">
  102.     <DIV ID="bottomLayer" CLASS="maps">
  103.     <IMG SRC="res/apple1.gif" USEMAP="#myMap" BORDER=0>
  104.     </DIV>
  105.     <DIV ID="topLayer" CLASS="maps">
  106.     <IMG NAME=TEST SRC="res/apple2.gif" USEMAP="#myMap" BORDER=0>
  107.     </DIV>
  108. </DIV>
  109.  
  110. </BODY>
  111. </HTML>
  112.